<template>
    <div class="headerTab">
      <div class='header bg-cor'>
        <div class='nav'>
          <div class='container'>

            <div class='logo'>
              <!-- <img src='static/picture/logo_cc846bf.png'/> -->
              <h3  style="color:white;font-size: 20px;line-height: 2">河南老纳电子科技有限公司</h3>
            </div>
            <ul>
              <li><router-link to='/' class='item' :class="{cur:$route.name==='home'}">首页</router-link></li>
              <li><router-link to='/softwareSevice' :class="{cur:$route.name==='softwareSevice'}" class='item '>软件服务</router-link>
              </li>
              <li>
                <a href="javascript:void(0)" :class="{cur:$route.name==='solution'}" class='item '>解决方案</a>
                <div class='dropdown dropdown-solution'>
                  <div class='sub-item-col' v-for="(item,index) in soluteList" :key="index">
                    <div class='menu-panel'>
                      <h3 class='sub-title'>{{item.name}}</h3>
                      <ul class='menu-panel-list'>
                        <li v-for="(v,k) in item.list" :key="k">
                          <a href="javascript:void(0)" @click="goPage(v.id)">{{v.name}}</a>
                          </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </li>
              <!-- <li><router-link to='/outsource'  class='item'  :class="{cur:$route.name==='outsource'}">人力外包</router-link></li>
              <li><router-link to='/cloud' class='item ' :class="{cur:$route.name==='cloud'}">云服务</router-link></li> -->
              <li><router-link to='/about' class='item ' :class="{cur:$route.name==='about'}">关于我们</router-link></li>
            </ul>
          </div>
        </div>
      </div>
      <div class='header-mo bg-cor' @click="tabShow = false">
        <h1 style="color:white;font-size: 16px;line-height: 2">
          <!-- <img src='static/picture/logo_mo_66971ac.png'/> -->
          河南老纳电子科技有限公司
        </h1>
        <span class='nav-btn' @click.stop="tabShow = !tabShow">
          <img src='static/picture/icon_nav_mo_57ef1ce.png'/>
        </span>
        <ul class='nav-mo' v-show="tabShow">
          <li><i></i></li>
          <li><router-link to='/' class='cur'>首页</router-link></li>
          <li><router-link to='/softwareSevice' class=''>软件服务</router-link></li>
          <li><router-link to='/solution' class=''>解决方案</router-link></li>
          <!-- <li><router-link to='/outsource' class='item'>人力外包</router-link></li> -->
          <!-- <li><router-link to='/cloud' class='item '>云服务</router-link></li> -->
          <li><router-link to='/about' class=''>关于我们</router-link></li>
        </ul>
      </div>
      <div class='header-space'></div>

    </div>
</template>

<script>
    export default {
      name: "headerTab",
      inject: ["reload"], //注入reload方法
      data(){
          return{
            tabShow:false,
            soluteList:[],
            id:0
          }
      },
      mounted(){
        this.solute()
      },
      methods:{
        goPage(id){
          this.$router.replace({
            path:'/solution',
            query:{
              id:id
            }
          })
          this.reload()
        },
        solute(){
          this.$http.post('index/getjjfa').then(res=>{
            console.log(res)
            this.soluteList = res;
            this.id = res[0].list[0].id
          })
        }
      }
    }
</script>

<style scoped>
  .headerTab{
  }
</style>
